<template>
  <form-item-wrapper
    :designer="designer"
    :field="field"
    :rules="rules"
    :design-state="designState"
    :parent-widget="parentWidget"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :sub-form-row-id="subFormRowId"
  >
    <el-table
      :data="tableData"
      :height="setHeight"
      @current-change="(row) => bindFun('currentChange', row)"
      @selection-change="(row) => bindFun('selectionChange', row)"
      :size="options.size"
      :border="options.border"
      v-bind="options.attributeET"
      @sort-change="(column) => bindFun('sortChange', column)"
      @filter-change="filterHandle"
    >
      <el-table-column
        align="center"
        v-if="options.attributeET.selectionType"
        type="selection"
        width="45"
      >
      </el-table-column>
      <el-table-column
        label="#"
        align="center"
        v-if="options.attributeET.showIndex"
        type="index"
        width="50"
      >
      </el-table-column>
      <template
        v-for="{
          label,
          prop,
          sortable,
          filters,
          filterData,
        } in options.tableColumn"
      >
        <el-table-column
          :key="label"
          :label="label"
          :prop="prop"
          :sortable="sortable"
          v-if="filters"
          :filters="filterData"
          :column-key="prop"
        ></el-table-column>
        <el-table-column
          v-else
          :key="label"
          :label="label"
          :prop="prop"
          :sortable="sortable"
        ></el-table-column>
      </template>
      <el-table-column
        fixed="right"
        v-if="options.attributeET.operationShow"
        align="center"
        label="操作"
        :width="options.attributeET.operationWidth"
      >
        <template slot-scope="{ row }">
          <template v-if="options.attributeET.operation">
            <template v-for="item in options.attributeET.operation">
              <el-button
                type="text"
                size="mini"
                @click="clickOperationBtn(row, item)"
              >
                {{ item.name }}
              </el-button>
            </template>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </form-item-wrapper>
</template>

<script>
import FormItemWrapper from "./form-item-wrapper";
import emitter from "@/utils/emitter";
import i18n, { translate } from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import { EventBus } from "@/components/javaScript/EventBus";

export default {
  name: "el-table-widget",
  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件
  mixins: [emitter, fieldMixin, i18n],
  props: {
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,

    designState: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
  },
  components: {
    FormItemWrapper,
  },
  inject: ["refList", "formConfig", "globalOptionData", "globalModel"],
  data() {
    return {
      oldFieldValue: null, //field组件change之前的值
      fieldModel: [],
      rules: [],

      tableData: [],
    };
  },
  computed: {
    options() {
      return this.field.options;
    },
    inputType() {
      if (this.field.options.type === "number") {
        return "text"; //当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！
      }

      return this.field.options.type;
    },
    setHeight() {
      if (this.designState) {
        return "auto";
      }
      let h = document.querySelector("body").offsetHeight
        ? document.querySelector("body").offsetHeight
        : 500;
      return 500 + "px";
    },
  },
  beforeCreate() {
    /* 这里不能访问方法和属性！！ */
  },

  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
           需要在父组件created中初始化！！ */
    this.initFieldModel();
    this.registerToRefList();
    this.initEventHandler();
    this.buildFieldRules();

    this.handleOnCreated();
  },

  mounted() {
    let that = this;
    this.handleOnMounted();
    this.$nextTick(()=>{
      this.setTableData(this.dataSourceMapData);
    });
    EventBus.$on(this.options.dataSource, (data) => {
      that.setTableData(data);
    });
  },

  beforeDestroy() {
    this.unregisterFromRefList();
  },

  methods: {
    filterHandle(value) {
      this.bindFun("filterChange", value);
    },
    clickOperationBtn(row, item) {
      if (this.designState) {
        //设计状态不触发点击事件
        return;
      }
      if (item.onClick) {
        EventBus.$emit("childEvent", item.onClick, row);
      }
    },
    bindFun(type, data) {
      if (this.designState) {
        //设计状态不触发点击事件dd
        return;
      }
      if (this.field.options[type]) {
        EventBus.$emit("childEvent", this.field.options[type], data);
      }
    },
    handleButtonWidgetClick(row) {
      if (this.designState) {
        //设计状态不触发点击事件
        return;
      }
      if (this.field.options.currentChange) {
        EventBus.$emit("childEvent", this.field.options.currentChange, row);
      }
    },
    setTableData(v) {
      if (this.options.dataSource && v) {
        if (v[this.options.dataSource]) {
          this.$set(this, "tableData", v[this.options.dataSource]);
        } else if(v instanceof Array){
          this.$set(this, "tableData", v);
        }
      }
    },
  },
  watch: {
    tableData: {
      handler(v) {
        if (v && v.length > 0) {
          this.$emit("formModel", this.options.name, v);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/global.scss";

::v-deep.el-table--mini {
  .el-table__header-wrapper {
    .el-table__header {
      .has-gutter {
        > tr {
          > th {
            line-height: 30px;
          }
        }
      }
    }
  }

  .el-table__fixed-right {
    .el-table__fixed-header-wrapper {
      .el-table__header {
        > thead {
          > tr {
            > th {
              line-height: 30px;
            }
          }
        }
      }
    }
  }
}

::v-deep.el-table--small {
  .el-table__header-wrapper {
    .el-table__header {
      .has-gutter {
        > tr {
          > th {
            line-height: 30px;
          }
        }
      }
    }
  }

  .el-table__fixed-right {
    .el-table__fixed-header-wrapper {
      .el-table__header {
        > thead {
          > tr {
            > th {
              line-height: 30px;
            }
          }
        }
      }
    }
  }
}

::v-deep.el-table {
  .el-table__fixed-body-wrapper {
    .el-table__body {
      .el-table__row {
        .el-table__cell {
          .cell {
            .el-button {
              padding: 0 !important;
              font-size: 13px;
              line-height: 26px;
            }
          }
        }
      }
    }
  }
}
</style>
